<template>
  <a-input
    :class="{ 'input-control': true, error: !isCheckPass }"
    v-model:value="val"
    :disabled="controls[controlKey]?.disabled"
    placeholder="请输入"
    @blur="onBlur"
  />
</template>

<script lang="ts">
import { defineComponent, computed, ref } from 'vue';
import { message } from 'ant-design-vue';
import { FormatControlValue } from '@/global/util/formDesign';

export default defineComponent({
  name: 'InputControl',
  props: {
    value: {
      type: String,
      default: '',
    },
    card: {
      type: Object as any,
      default: () => ({}),
    },
    controls: {
      type: Object,
      default: () => ({}),
    },
    controlKey: {
      type: String,
      default: () => '',
    },
  },
  setup(props, context) {
    const isCheckPass = ref(true);
    const val = computed({
      get: () => props.value,
      set: (val) =>
        context.emit('updateValue', val, props.controlKey, props.controls),
    });
    const onBlur = () => {
      if (props.controlKey === 'ctlValue') {
        isCheckPass.value = FormatControlValue(
          props.card,
          val.value,
        ) as boolean;
        if (!isCheckPass.value) {
          message.warning('格式不正确');
        }
      }
    };

    return {
      isCheckPass,
      val,
      onBlur,
    };
  },
});
</script>

<style lang="less" scoped>
.input-control {
  width: 100%;
  font-size: 12px;
  line-height: 22px;
  border-radius: 4px;
  &.error {
    border-color: @rb-error-color;
  }
}
</style>
